<template>
  <div class="zho">
    <el-header >
        <div class="lhy-1">
          <el-link type="primary">首页</el-link>
        </div>
    </el-header>
    <el-row  :gutter="20" >
      <el-col :span="6" ><div class="lhy-2">书籍</div></el-col>
      <el-col :span="3">
        <el-row>
          <el-col><div class="bg-1">作者：</div></el-col>
        </el-row>
        <el-row>
          <el-col><div class="bg-1">出版社：</div></el-col>
        </el-row>
        <el-row>
          <el-col><div class="bg-1">字数：</div></el-col>
        </el-row>
        <el-row>
          <el-col><div class="bg-1">简介：</div></el-col>
        </el-row>
        <el-row>
          <el-col><div class="bg-1">时间：</div></el-col>
        </el-row>
        <el-row>
          <el-col><div class="bg-1">热度：</div></el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row  :gutter="20">
      <el-col :span="10"><div class="lhy-3">书籍详情</div></el-col>
    </el-row>
    <el-row  :gutter="10">
      <el-col :span="6"><el-button class="a">我要交换</el-button></el-col>
      <el-col :span="6"><el-button class="a-1">立即购买</el-button></el-col>
    </el-row>
    <el-row  :gutter="10">
      <el-col :span="6"><div class="bg-3">读者评价</div></el-col>
      <el-col :span="6" ><div class="bg-4">评价:</div></el-col>
    </el-row>
    <el-row  :gutter="10">
      <el-col :span="6"  :offset="17"><el-button class="bg-5">提交评价</el-button></el-col>
    </el-row>

  </div>

</template>

<script>
export default {
  name: "lhy"
}
</script>

<style>

.zho{
  background-color:#BBFFFF ;
  margin:auto;
  height: 1000px;
  width: 1200px;



}
.el-header{
  background-color: #ECFFFF;
  margin-top: 10px;

}
.lhy-1{
  color: #333333;
  line-height: 60px;
  margin-right: 1000px;
}
.lg
{width: 60px;
  height: 60px;
  background: white;
  border-radius: 100%;
  float: right;
}
.lhy-2{
  background-color:#ECFFFF;
  text-align: center;
  border-radius: 30px;
  line-height: 280px;
  margin-top: 20px;
  margin-left: 50px;
  width:300px;
  height: 300px;
}
.lhy-3{
  background-color: #ECFFFF;
  border-radius: 30px;
  margin-top: 20px;
  width: 1100px;
  height: 200px;
  line-height: 200px;
  margin-left: 50px;
}
.bg-1{
  background-color: #ECFFFF;
  color: #333;
  border-radius: 10px;
  text-align: left;
  line-height: 40px;
  height: 33px;
  width:750px;
  margin-top: 20px;
  margin-left: 100px;
}
.a{
  background-color: #ECFFFF;
  color: #333;
  border-radius: 50px;
  line-height: 30px;
  height: 50px;
  width:200px;
  margin-top: 20px;
  margin-left: 10px;
}
.a-1 {
  background-color: #ECFFFF;
  color: #333;
  border-radius: 50px;
  line-height: 30px;
  height: 50px;
  width:200px;
  margin-top: 20px;
  margin-right: 300px;
}
.bg-3{
  background-color: #ECFFFF;
  color: #333;
  border-radius: 60px;
  text-align: center;
  line-height: 50px;
  height: 50px;
  width:200px;
  margin-top: 10px;
  margin-left:50px;
}
.bg-4 {
  background-color: #ECFFFF;
  color: #333;
  text-align: left;
  border-radius: 10px;
  line-height: 60px;
  height: 50px;
  min-width: 850px;
  margin-top: 10px;
  margin-left: 0px;
}
.bg-5 {
  background-color: #ECFFFF;
  color: #333;
  margin-top: 10px;
  margin-left: 100px;
  border-radius: 10px;
  text-align: center;
  line-height: 30px;
  height: 50px;
  width:200px;
}

</style>
